in css c'è sempre stata una certa logica condizionale poichè basilarmente ogni selettore in un certo qual modo è logica condizionale. Una cosa che possiamo dire non ci sia mai stata integrata è la possibilità di scegliere condizionalmente cosa far ritornare ad uno stile per esempio in base a delle variabili custom da noi create in css oppure magari in base alla presenza o meno di uno stile in un elemento per esempio se l'elemento possiede la proprietà background red setta color a white, e voi direte ma queste cose si posso fare in maniera molto grezza usando gli if in javascript magari con tailwind e applicando classi condizionali, però secondo me non è la stessa cosa, può essere molto più pulito organizzarsi il file css magari con variabili e if function se serve, te lo commenti per bene e tieni tutto organizzato e non hai stili con variabili condizionali sparse per react, io al momento sono un fiero utilizzatore di tailwind però ora che sto vedendo le ultime feature di css sto valutando anche di poter tornare ad utilizzare un'po di css, comunque dopo questo preambolo passiamo a parlare dell'argomento principale:

come si scrive una if functions in css

ora vi farò vedere un esempio di if e lo commenteremo per capire come funziona:

body {
  --color: "dark"; 

  color: if(
      style(--color: "dark"): black; 
      else white
    ); 
  visibility: if(style(--isMobile): hidden; 
} 

qui abbiamo un esempio di if in css e come possiamo vedere più o meno la struttura è uguale a quella di un if normale come la vediamo in tutti i linguaggi di programmazione, abbiamo al primo rigo del if, la condizione ovvero che se la variabile color è dark setta black come colore se no secondo rigo else white oppure potremmo dire per esempio se isMobile è true metti hidden, al momento l'if in css su alcuni aspetti è molto limitato per esempio non ti puoi basare su valori css standard o su elementi html per dettare le condizioni o per esempio ci sono casi più particolari come vedremo dopo dove con calc bisogna dichiarare una configurazione per far si che il css ti calcoli effettivamente il valore in maniera dinamica, però secondo me in futuro quando l'utilizzo del if si sarà evoluto risulterà un'ottimo strumento. Se prendiamo il secondo if che ho scritto, in cui non c'è un else che prende tutti i casi in cui la condizione non è vera, Beh la risposta è molto semplice, nel caso in cui non c'è l'else e non entra nel caso da noi definito prenderà i valori dello stile predefinito del browser.

Altri modi di utilizzare le if functions in css

Controllare se una variabile css esiste, così come abbiamo fatto sopra nel caso della visibility:

body {
  --isMobile: true; 

  visibility: if(style(--isMobile): hidden; 
} 

Oppure possiamo mettere nello stesso if più condizioni per creare condizioni più complete:

body {
  --color: "dark"; 

  color: if(
      style(--color: "dark"): black;
      style(--color: "white"): white;
      else white
    ); 
}